import { Menu } from 'ant-design-vue'
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.name" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <icon-font :type="menuInfo.meta.icon" :style="{color: menuInfo.meta.iconColor}" /><span>{{ menuInfo.meta.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.name" @click="onClick(item.name)">
            <icon-font :type="item.meta.icon" :style="{color: item.meta.iconColor}" />
            <span>{{ item.meta.title }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.name" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
  name: 'SubMenu',
  isSubMenu: true,
  components: {},
  props: {
    ...Menu.SubMenu.props,
    menuInfo: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    onClick (name) {
      this.$router.push({ name: name })
    }
  }
}
export default SubMenu
